<template>
    <div class="content">

        <div class="mflow-box">
            <span>流光边框</span>
        </div>

    </div>
</template>

<script setup>
    // 流光边框动画效果示例
</script>

<style scoped>
    .content {
        width: 100%;
        height: 1200px;
        padding: 300px 0 0 500px;
        background-color: #000000;
    }

    .mflow-box {
        width: 200px;
        height: 120px;
        /* background-color: #FFFFFF; */
        border-radius: 20px;
        position: relative;
        overflow: hidden;
    }

    .mflow-box::before {
        content: '';
        width: calc(100% - 6px);
        height: calc(100% - 6px);
        background-color: #000000;
        border-radius: 20px;
        position: absolute;
        top: 3px;
        left: 3px;
        z-index: 2;
    }

    .mflow-box::after {
        content: '';
        width: 300%;
        height: 300%;
        /* background-image: conic-gradient(#EEEEEE22, #fc97e9, #e7d0fe, #cca9fd, #02eded, #adf674, #fefe05, #fec900, #EEEEEE22 60%); */
        background-image: conic-gradient(#EEEEEE22, #F0C237, #EEEEEE22 30%);
        border-radius: 20px;
        position: absolute;
        top: -100%;
        left: -100%;
        z-index: 1;
        animation: rotate 5s linear infinite;
    }

    @keyframes rotate {
        100% {
            transform: rotate(360deg);
        }
    }

    .mflow-box span {
        position: absolute;
        top: 3px;
        left: 3px;
        width: 100%;
        font-size: 28px;
        text-align: center;
        line-height: 110px;
        color: #F0C237;
        z-index: 8;
    }
</style>